<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="html-box" v-if="datas.show_list">
      <div id="tool">

        <div style="text-align: center;font-size: 18px" v-if="datas.show_list.length <= 0">请设置显示板块内容</div>

        <div class="data-item" v-for="item in datas.show_list" :key="item.value">
          <span class="data-title" v-if="item.value === 'charity'">慈善基金捐赠总额：</span><span class="price">100元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import emptyImage from '@/resource/images/image.png';
	// 自定义样式
	const css = function () {
	// 	if(this.datas.preview_color) {
	// 		const {
	// 			preview_color,
	// 			text_color
	// 		} = this.datas;
  //
	// 		return `
  //     .component-${this.id} .html-box {
  //         background-color: ${preview_color.color};
  //         background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
  //         background-size: 100% 100%;
  //         background-position: center;
  //         background-repeat: no-repeat;
  //     }
  //
  //     .component-${this.id} .html-box .tool-box, .component-${this.id} .html-box .tool-boxlis{
  //         color: ${text_color};
  //     }
  // `;
	// 	}
	};

	export default {
		props: ["id", "datas", "styles"],
		data() {
			return {
				emptyImage
			};
		},
		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = ["component-wrapper", `component-${this.id}`];
				return name;
			},
		},
		methods: {},
	};
</script>

<style lang="less" scoped>
  * {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  // 默认
  .component-wrapper {
    width: 375px;
  }

  .html-box {
    min-height: 30px;
  }

  .data-item {
    padding: 10px 15px;
    font-size: 15px;
    text-align: left;
    .price {
      color: #f56c6c;
      font-size: 16px;
    }
  }
</style>
